<template>
    <div>
        <filterComponent v-model:filter-data="filterData" hideHead @doSearch="handleSearch" />
    </div>
    <el-card class="reset">
        <tableComponent class="set-height" theme="light" :table-header="tableHeader" :table-data="tableData"
            v-model:page-info="pageInfo" @pageChange="handlePageChange" @sort-change="sortMethod">
            <template #payMode>
                <el-table-column prop="payMode" label="充值方式" width="120">
                    <template #default="scope">
                        <span>{{ payModeName(scope.row.payMode) }}</span>
                    </template>
                </el-table-column>
            </template>
        </tableComponent>
    </el-card>
</template>
<script setup>
import { ref, watch, computed, onMounted } from 'vue'
import filterComponent from '@/components/filterComponent/index.vue'
import tableComponent from '@/components/tableComponent/index.vue'
import { getEleSignRechargeRecord } from '@/api/clients/signClient.ts'

const props = defineProps({
    companyId: {
        type: [String, Number]
    }
})

const filterData = ref({
    list: {
        queryTime: {
            name: '发票日期',
            prop: 'queryTime',
            value: '',
            placeholder: '请选择发票日期',
            type: 'date',
            dateType: 'date',
            handleFocus: (item) => {

            },
            handleChange: (item) => {

            }
        },
    },
    buttonList: [
    ]
})

const pageInfo = ref({
    pageNum: 1,
    pageSize: 10,
    total: 0
})

const tableHeader = ref([
    {
        label: '充值时间',
        prop: 'createTime',
    },
    {
        label: '充值金额',
        prop: 'payMoney',
    },
    {
        label: '充值份数',
        prop: 'rechargeAmount',
    },
    {
        label: '充值方式',
        prop: 'payMode',
    }
])

const tableData = ref([])

const sortMethod = (column) => {
    console.log(123, column)
}

const handleSearch = () => {
    getData()
}

const handlePageChange = () => {
    getData()
}

const createQuery = () => {
    const query = {}
    for (const key in filterData.value.list) {
        if (Array.isArray(filterData.value.list[key].value)) {
            query[filterData.value.list[key].prop] = filterData.value.list[key].value.join(',')
        } else {
            query[filterData.value.list[key].prop] = filterData.value.list[key].value
        }
    }
    return query
}

const payModeName = computed(() => {
    return (type) => {
        const map = {
            1: '公对公',
            2: '微信',
            3: '私对公',
            4: '赠送'
        }
        return map[type]
    }
})

const getData = () => {
    getEleSignRechargeRecord({
        ...createQuery(),
        companyId: props.companyId,
        pageNum: pageInfo.value.pageNum,
        pageSize: pageInfo.value.pageSize,
    }).then(res => {
        tableData.value = res.list
        pageInfo.value.total = res.totalCount
    })
}

watch(() => props.companyId, (newval) => {
    if (newval) {
        getData()
    }
}, {
    immediate: true
})
</script>
<style lang="scss" scoped>
.reset {
    margin-top: -16px;
}

.set-height {
    // height: 335px;
}
</style>